<!DOCTYPE html>
<html class="no-js" lang="">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Simple HTML/CSS image gallery</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">

  /* CSS Style */
  /* Example by Olga Moz at https://codepen.io/olgamozejko/pen/yLjwyye */

  .gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    max-width: 600px;
    position: relative;
    padding-top: 420px;
}

.gallery__img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
}

.gallery__thumb {
    padding-top: 6px;
    margin: 6px;
    display: block;
}

.gallery__selector {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-visibility: hidden;
    -moz-visibility: hidden;
}

.gallery__selector:checked + .gallery__img , .label_box img {
    opacity: 1;
}

.label_box {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-right: auto;
}

.label_box img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
}

  </style>
</head>

<body>
  
  <div class="gallery" >
  
    <div class="gallery__item" style="align-items: center; justify-content: center; display: flex;">
      <input type="radio" id="img-1"  checked name="gallery"     class="gallery__selector"/>
        <img class="gallery__img" 
             src="https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt=""/>
      <div class="label_box">
        <label for="img-1" class="gallery__thumb" id="label_Pstar1">
        <img src="https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt=""/>
        </label></div>
    </div>
    
    <div class="gallery__item" style="align-items: center; justify-content: center; display: flex;">
      <input type="radio" id="img-2" name="gallery" class="gallery__selector"/>
        <img class="gallery__img" 
             src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1141&q=80" alt=""/>
      <div class="label_box">
        <label for="img-2" class="gallery__thumb" id="label_Pstar1">
          <img src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1141&q=80" alt=""/>
        </label></div>
    </div>
      
    <div class="gallery__item" style="align-items: center; justify-content: center; display: flex;">
      <input type="radio" id="img-3" name="gallery" class="gallery__selector"/>
        <img class="gallery__img" 
             src="https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt=""/>
      <div class="label_box">
        <label for="img-3" class="gallery__thumb" id="label_Pstar1">
        <img src="https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt=""/>
      </label></div>
    </div>
      
    <div class="gallery__item" style="align-items: center; justify-content: center; display: flex;">
      <input type="radio" id="img-4" name="gallery" class="gallery__selector"/>
        <img class="gallery__img" 
             src="https://images.unsplash.com/photo-1542202229-7d93c33f5d07?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt=""/>
      <div class="label_box">
        <label for="img-4" class="gallery__thumb" id="label_Pstar1">
        <img src="https://images.unsplash.com/photo-1542202229-7d93c33f5d07?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt=""/>
        </label></div>
    </div>
      
    <div class="gallery__item" style="align-items: center; justify-content: center; display: flex;">
      <input type="radio" id="img-5" name="gallery" class="gallery__selector"/>
        <img class="gallery__img" 
             src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80" alt=""/>
      <div class="label_box" style="align-items: center; justify-content: center; display: flex;">
        <label for="img-5" class="gallery__thumb" id="label_Pstar1">
        <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80" alt=""/>
        </label></div>
    </div>
      
    </div>

    </body>
    </html>
